<template>
	<view class="page_scroll_view">
		<tn-navbar fixed :bottom-shadow="false">套餐管理</tn-navbar>
		<tn-sticky class="tn-white_bg">
			<view class="tn-p-sm tn-pb">
				<tn-search-box v-model="query.keyword" @search="getComboList" @clear="getComboList"
					search-button-bg-color="#F8F7F8" placeholder="请输入套餐名称" search-button-text-color="#AAAAAA" />
			</view>
			<view class="tn-p-sm tn-pl tn-gray-light_bg tn-flex items-center">
				<text>共 {{total}} 条记录</text>
			</view>
		</tn-sticky>
		<loading v-if="isLoading" style="height: 70vh;"></loading>
		<view class="empty" style="height: 70vh;" v-else-if="comboList.length == 0">
			<image
				src="https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2025/02/a0c4966b-11af-4c87-93aa-359f9c03d89f83ee61eba8e363790692eb5fd8a98de7.png"
				mode="widthFix"></image>
			<text>这里空空荡荡，啥也没有留下</text>
		</view>
		<scroll-view scroll-y="true" v-else>
			<view>
				<view class="tn-p tn-pb-sm border_bottom" v-for="(item,index) in comboList" :key="item.id">
					<view class="tn-flex items-center justify-between" @click="openPopup(item,index)">
						<view class="tn-flex items-center">
							<tn-avatar shape="square"
								:url="item.image?item.image:'https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2024/11/9ccf98d5-b98d-4371-aeda-4cc50314d4e7453ab7651200438c6997a0665aec4063.png'"
								size="xl" />
							<view class="tn-ml-sm tn-flex tn-flex-column tn-text-xs tn-flex-1">
								<text class="tn-mr-xs tn-text-ellipsis-1">所属商家：{{item.seller_name}}</text>
								<text class="tn-mr-xs tn-text-ellipsis-1">套餐名称：{{item.title}}</text>
								<text style="margin-top:1px" class="tn-text-ellipsis-1">
									套餐售价：￥{{item.price}}
									<text style="text-decoration: line-through;color: #AAAAAA;"
										class="tn-ml-xs">￥{{item.original_price}}</text>
								</text>
								<text style="margin-top:1px" class="tn-text-ellipsis-1">套餐销量：{{item.sell_num}}</text>
							</view>
						</view>
						<tn-icon class="tn-text-right" type="info" name="right" />
					</view>
					<view class="tn-flex justify-between items-end tn-mt">
						<view :style="[{color:colorMap[item.audit_status]},'font-size: 13px']"
							class="tn-text-ellipsis-1">
							<text>{{item.audit_status_text}}</text>
							<text v-if="item.audit_status==2">：{{item.error_mark}}</text>
						</view>
						<view class="tn-flex items-center justify-end gap-2" v-if="item.audit_status==0">
							<tn-button type="danger" width="150" height="60" @click="reject(item.id)">驳回</tn-button>
							<tn-button type="primary" width="150" height="60"
								@click="approval('agree',item.id)">通过</tn-button>
						</view>
					</view>
				</view>
				<view class="tn-pt-sm tn-pb-sm tn-flex-center">
					<uni-pagination :total="total" :current="query.page" :pageSize="query.limit" @change="changePage" />
				</view>
			</view>
		</scroll-view>
	</view>
	<tn-popup v-model="showPopup" open-direction="center">
		<view class="tn-p-lg">
			<view class="popup_title">
				参数设置
			</view>
			<view class="border_bottom">
				<tn-title title="销售返佣比例（千分比）" mode="vLine" assist-color="tn-blue" class="tn-mb-sm" />
				<view class="tn-flex-center-center gap-2 tn-mb">
					<tn-input type="number" v-model="currentCombo.sale_rate" placeholder="销售返佣（千分比）" clearable
						@blur="inputBlur($event,'sale_rate')"></tn-input>
					<tn-switch v-model="currentCombo.sale_switch" :active-value="1" :inactive-value="0" active-text="开启"
						inactive-text="关闭" active-color="tn-green" shape="square"
						@change="changeSwitchChange('sale_switch')" />
				</view>
			</view>
			<view class="tn-mt">
				<tn-title title="商家回款比例（百分比）" mode="vLine" assist-color="tn-blue" class="tn-mb-sm" />
				<view class="tn-flex-center-center gap-2">
					<tn-input type="number" v-model="currentCombo.seller_rate" placeholder="商家回款比例（百分比）" clearable
						@blur="inputBlur($event,'seller_rate')"></tn-input>
					<tn-switch v-model="currentCombo.seller_switch" :active-value="1" :inactive-value="0"
						active-text="开启" inactive-text="关闭" active-color="tn-green" shape="square"
						@change="changeSwitchChange('seller_switch')" />
				</view>
			</view>
			<view class="tn-flex-center tn-mt">
				<tn-button size="lg" width="80vw" height="80" font-size="26" @click="showPopup=false">确定提交</tn-button>
			</view>
		</view>
	</tn-popup>
	<tn-popup v-model="showReviewPopup" open-direction="center">
		<view class="tn-p-lg">
			<view class="popup_title">
				驳回理由
			</view>
			<tn-input type="textarea" v-model="reviewParams.reason" placeholder="请输入驳回理由" clearable :maxlength="50"
				height="220" show-word-limit></tn-input>
			<view class="tn-flex-center tn-mt">
				<tn-button size="lg" width="80vw" height="80" font-size="26"
					@click="approval('refuse')">确定提交</tn-button>
			</view>
		</view>
	</tn-popup>
	<tn-modal ref="modalRef" />
</template>

<script setup>
	import {
		getComboListApi,
		comboUpdateApi,
		comboApplyReviewApi
	} from "@/request/worktop/merchant.js"
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"

	onLoad(() => {
		getComboList()
	})

	const colorMap = {
		0: '#AAAAAA',
		1: '#31E749',
		2: '#FF444F'
	}

	const formRef = ref()
	const modalRef = ref()
	const isLoading = ref(true)
	const showPopup = ref(false)
	const showReviewPopup = ref(false)
	const query = ref({
		page: 1,
		limit: 20,
		keyword: '',
		sellerId: ''
	})
	const params = ref({
		id: 0,
		field: '',
		value: 0
	})
	const reviewParams = ref({
		id: 0,
		action: '',
		reason: ''
	})

	const total = ref(0)

	const comboList = ref([])
	const currentCombo = ref({})
	const currentIndex = ref(1)

	// 获取套餐列表
	const getComboList = () => {
		isLoading.value = true
		getComboListApi(query.value).then(res => {
			if (res.code == 0) {
				total.value = res.other.total
				comboList.value = res.data
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: "none"
			})
		}).finally(() => {
			setTimeout(() => {
				isLoading.value = false
			}, 500)
		})
	}
	// 修改参数弹窗
	const openPopup = (item, index) => {
		currentIndex.value = index
		currentCombo.value = JSON.parse(JSON.stringify(item))
		showPopup.value = true
	}
	// 更新页码
	const changePage = (e) => {
		query.value.page = e.current
		getComboList()
	}
	// 编辑套餐参数
	const comboUpdate = (type = '', switchValue = null, isSwitch = true) => {
		params.value.id = currentCombo.value.id
		params.value.field = type
		if (switchValue) {
			params.value.value = switchValue
		}
		comboUpdateApi(params.value).then(res => {
			if (res.code == 0) {
				if (isSwitch) {
					comboList.value[currentIndex.value][type] = currentCombo.value[type] ?
						1 : 0
				} else {
					comboList.value[currentIndex.value][type] = currentCombo.value[type]
				}
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: "none"
			})
		})
	}
	// Switch开关
	const changeSwitchChange = (type = '') => {
		comboUpdate(type, currentCombo.value[type] ? 0 : 1, true)
	}
	// 输入框失焦
	const inputBlur = (e, type) => {
		comboUpdate(type, e.detail.value, false)
	}
	// 驳回申请
	const reject = (id) => {
		showReviewPopup.value = true
		reviewParams.value.reason = ''
		reviewParams.value.id = id
	}
	// 审核
	const approval = (status, id = 0) => {
		if (status !== 'agree' && reviewParams.value.reason.trim() == '') {
			uni.showToast({
				title: '请先输入驳回理由',
				icon: "none"
			})
			return
		}
		if (id) {
			reviewParams.value.id = id
		}
		reviewParams.value.action = status
		modalRef.value?.showModal({
			title: '提示',
			content: `是否${status == 'agree' ? '通过' : '驳回'}该申请吗？`,
			showCancel: true,
			confirm: () => {
				if (status == 'agree') {
					reviewParams.value.reason = '同意申请'
				}
				applyReview()
			}
		})
	}
	// 申请操作
	const applyReview = () => {
		comboApplyReviewApi(reviewParams.value).then(res => {
			if (res.code == 0) {
				showReviewPopup.value = false
				uni.showToast({
					title: res.message,
					success() {
						setTimeout(() => {
							getComboList()
						}, 800)
					}
				})
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: "none"
			})
		})
	}
</script>

<style scoped lang="scss">
</style>